/**
 * @time: 2021/07/05
 * @description: 本组件设置了1rem单位的大小
 *               同时如果需要开发适配全屏的页面,即上下左右无超出滚动,使用 content-wrap 样式即可
 *               content-wrap 规定了宽高比例的盒子,盒子内部即为安全显示区域
 */
import $ from "jquery"

/* remCalc：func   设置安全区域，匹配 rem  
 * vhParam：number 安全区域显示比例 高
 * vwParam：number 安全区域显示比例 宽
 */
 
const remCalc = (vhParam, vwParam)=>{ 
    let vh = vhParam
    let vw = vwParam
    let defineHeigth, defineWidth
    
    // 获取屏幕高度，获取屏幕宽度
    let windowHeight = $(window).height();
    let windowWidth = $(window).width();
    
    // 计算可视区域比例
    if(windowHeight/windowWidth >= vh/vw){
        defineHeigth = windowWidth*(vh/vw)
        defineWidth = windowWidth
    }else{
        defineHeigth = windowHeight
        defineWidth = windowHeight*(vw/vh)
    }
    window.selfDefinedHeight = defineHeigth
    window.selfDefinedWidth = defineWidth
    
    // 设置安全盒子的样式
    try {
        $('.content-wrap').css({
            "width": defineWidth,
            "height":defineHeigth
        })
    } catch (error) {
        console.log("设置错误-", error);
    }

    // 设置基础字体大小
    let fontSize = defineWidth / 37.5
    fontSize = fontSize > 18 ? 18 : fontSize
    document.documentElement.style.fontSize = fontSize + 'px';
}

// 初始化 rem 配置
remCalc(5, 3);

// 监控 --- 防止可视区域大小意外的改变导致页面展示不全的问题
window.addEventListener('resize',()=>{
    remCalc(5, 3);
})
